<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {	
				
				background: url(../img/bg_jacky.jpg) no-repeat;
				background-size: cover;				
			}

			ul {
				width: 200px;
				height: 200px;
				/* background: #f00; */

				position: absolute;
				bottom: 100px;
				left: 50%;
				margin-left: -100px;

				transform-style: preserve-3d;

				/* transform: rotateX(-10deg) rotateY(0deg); */

				animation: adrot 15s linear 0s infinite;

			}

			.box {
				width: 150px;
				height: 150px;
				position: absolute;
				top: 100px;
				left: 50%;
				margin-left: -75px;
				animation: myheart 2s ease 0s infinite;
				
				z-index: -1;
			}

			.box img {
				width: 150px;
				height: 150px;
			}
			
			div.music{
				position: absolute;
				right: 0;
				bottom: 0;
			}

			ul li {
				width: 200px;
				height: 200px;
				font-size: 50px;
				text-align: center;
				line-height: 200px;
				list-style: none;
				position: absolute;
				top: 0;
				left: 0;
				background: #000;
			}

			ul:hover {
				animation-play-state: paused;
			}

			ul:hover li img {
				opacity: 0.3;
			}

			ul li:hover img {
				opacity: 1;
				transform: scale(1.2);
			}

			ul li img {
				width: 200px;
				height: 200px;
				border: 5px solid skyblue;
				box-sizing: border-box;
			}


			ul li:nth-child(1) {
				/* background: red; */
				transform: rotateY(60deg) translateZ(200px);
			}

			ul li:nth-child(2) {
				/* background: green; */
				transform: rotateY(120deg) translateZ(200px);
			}

			ul li:nth-child(3) {
				/* background: blue; */
				transform: rotateY(180deg) translateZ(200px);
			}

			ul li:nth-child(4) {
				/* background: purple; */
				transform: rotateY(240deg) translateZ(200px);
			}

			ul li:nth-child(5) {
				/* background: yellow; */
				transform: rotateY(300deg) translateZ(200px);
			}

			ul li:nth-child(6) {
				/* background: pink; */
				transform: rotateY(360deg) translateZ(200px);
			}

			@keyframes adrot {

				/* 注意：
				此处的transform:rotateY将会覆盖前面的transform:rotateX，所以要将上面的rotateX写到动画里面
				 不变得属性值rotateX要写在前面				
				*/
				from {
					transform: rotateX(-10deg) rotateY(0deg);
				}

				to {
					transform: rotateX(-10deg) rotrotateY(360deg);
				}
			}

			@keyframes myheart {
				0% {
					transform: scale(1);
				}

				50% {
					transform: scale(2.5);
				}

				100% {
					transform: scale(1);
				}
			}
		</style>
	</head>
	<body>
		<ul>
			<li><img src="../img/j1.PNG" alt=""></li>
			<li><img src="../img/j2.PNG" alt=""></li>
			<li><img src="../img/j3.PNG" alt=""></li>
			<li><img src="../img/j4.PNG" alt=""></li>
			<li><img src="../img/j5.PNG" alt=""></li>
			<li><img src="../img/j6.PNG" alt=""></li>
		</ul>
		<div class="box">
			<img src="../img/heart.png" alt="">
		</div>
		<div class="music">
			<audio src="../img/song.mp3" controls="controls">
			</audio>
		</div>
		
	</body>
</html>
